<template>
  <div class="right-top" ref="target"></div>
</template>

<script setup>
import { onMounted, ref, defineProps } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  lof: {
    type: Array,
    required: true,
  },
  file_id_show: {
    type: Array,
    required: true,
  },
});
const target = ref(null);
let mChart = null;

onMounted(() => {
  mChart = echarts.init(target.value);
  renderChart();
});
const renderChart = () => {
  let options = {
    title: {
      text: "用户电压曲线离群因子分数LOF值图",
      left: 10,
      top: 10,
      textStyle: {
        color: "#fff",
      },
    },
    backgroundColor: "#0E1327",
    grid: {
      containLabel: true,
      bottom: "5%",
      top: "20%",
      left: "10%",
      right: "5%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      triggerEvent: true,
      data: props.file_id_show.map((item, index) => {
        return index;
      }),
      axisLabel: {
        show: true,
        fontSize: 14,
        color: "#fff",
        align: "center",
        verticalAlign: "top",
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: true,
        lineStyle: {
          show: true,
          color: "#0B3561",
          width: 2,
        },
      },
    },
    yAxis: [
      {
        name: "用户电压曲线离群因子分数偏离值",
        nameLocation: "center",
        nameTextStyle: {
          padding: [0, 0, 30, 0],
          color: "white",
        },
        axisLabel: {
          interval: 0,
          show: true,
          fontSize: 18,
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: "solid",
            color: "#0B3561",
          },
        },
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        // barWidth: 30,
        silent: true,
        barCategoryGap: "60%",
        barGap: "10",
        itemStyle: {
          normal: {
            color: function (params) {
              console.log(params);
              if (Number(params.value) > 1.1) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#956FD4" },
                  { offset: 1, color: "#3EACE5" },
                ]);
              } else {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(156,107,211,0.5)" },
                ]);
              }
            },
          },
        },
        data: props.lof.map((item) => {
          return item.toFixed(2);
        }),
      },
    ],
  };
  mChart.setOption(options);
};
window.addEventListener("resize", function () {
  mChart.resize();
});
</script>

<style lang="scss" scoped>
.right-top {
  width: 95%;
  height: 95%;
  padding: 20px;
}
</style>
